<template>
  <div class="preview-window">
    <div class="preview-header">
      <div class="file-info">
        <h2>{{ fileData?.name || '未命名文件' }}</h2>
        <div class="file-meta">
          <span v-if="fileData?.size">{{ formatFileSize(fileData.size) }}</span>
        </div>
      </div>
      <button class="close-button" @click="closeWindow">关闭</button>
    </div>

    <div class="preview-content">
      <!-- PDF预览 -->
      <PDFViewer v-if="isPdf" :filePath="fileData?.path" @loading-change="setLoading" />

      <!-- Excel预览 -->
      <ExcelViewer v-else-if="isExcel" :filePath="fileData?.path" @loading-change="setLoading" />

      <!-- Word预览 -->
      <DocxViewer v-else-if="isWord" :filePath="fileData?.path" @loading-change="setLoading" />

      <!-- 其他文件类型预览 -->
      <div v-else class="unsupported-preview">
        <AlertTriangle size="64" />
        <p>暂不支持此类型文件的预览</p>
        <div class="file-info">
          <p>文件名：{{ fileData?.name }}</p>
          <p>文件类型：{{ fileExtension }}</p>
        </div>
      </div>
    </div>

    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { AlertTriangle } from 'lucide-vue-next'
import PDFViewer from './PDFViewer.vue'
import ExcelViewer from './ExcelViewer.vue'
import DocxViewer from './DocxViewer.vue'
import { formatFileSize } from '@/utils/fileUtils'

const fileData = ref<any>(null)
const loading = ref(true)

// 获取文件扩展名
const fileExtension = computed(() => {
  if (!fileData.value?.name) return ''
  const parts = fileData.value.name.split('.')
  return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : ''
})

// 判断文件类型
const isPdf = computed(() => fileExtension.value === 'pdf')
const isExcel = computed(() => ['xlsx', 'xls'].includes(fileExtension.value))
const isWord = computed(() => ['docx', 'doc'].includes(fileExtension.value))

// 监听文件数据
onMounted(() => {
  // 监听主进程发送的文件数据
  window.electron.ipcRenderer.on('file-to-preview', (_event, data) => {
    console.log('收到预览文件数据:', data)
    fileData.value = data
    loading.value = false
  })

  // 处理窗口关闭
  window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeWindow()
    }
  })
})

// 设置加载状态
const setLoading = (status: boolean) => {
  loading.value = status
}

// 关闭窗口
const closeWindow = () => {
  window.electron.ipcRenderer.send('close-preview-window')
}
</script>

<style scoped>
.preview-window {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--theme-bg-primary, #ffffff);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: var(--theme-bg-secondary, #f5f5f5);
  border-bottom: 1px solid var(--theme-border-light, #e0e0e0);
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-info h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--theme-text-primary, #333);
}

.file-meta {
  font-size: 12px;
  color: var(--theme-text-tertiary, #999);
  margin-top: 4px;
}

.close-button {
  padding: 6px 12px;
  border: 1px solid var(--theme-border-light, #e0e0e0);
  background-color: var(--theme-bg-primary, #ffffff);
  color: var(--theme-text-secondary, #666);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background-color: var(--theme-bg-tertiary, #f0f0f0);
  color: var(--theme-text-primary, #333);
}

.preview-content {
  flex: 1;
  overflow: auto;
  position: relative;
  display: flex;
}

.unsupported-preview,
.excel-preview,
.word-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-secondary, #666);
  gap: 16px;
}

.format-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.format-notice h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--theme-text-primary, #333);
}

.format-notice p {
  margin: 0;
  color: var(--theme-text-tertiary, #999);
}

.unsupported-preview .file-info {
  margin-top: 24px;
  text-align: center;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--theme-primary, #3370ff);
  border-radius: 50%;
  animation: spin 1s infinite linear;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
